<template>
  <div class="setting-container">
    <h3>字体设置</h3>
    <el-form  :model="settingValue" size="mini">
      <el-tabs v-model="activeName">
        <el-tab-pane label="内容设置" name="content">
          <el-form-item label="字体内容:" prop="text">
            <el-input
              rows="5"
              style="width: 280px"
              type="textarea"
              v-model="settingValue.text"></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="style">
          <el-form-item label="字体大小:" prop="textSize">
            <el-radio-group size="mini" v-model="settingValue.textSize">
              <el-radio-button label="15">小</el-radio-button>
              <el-radio-button label="28">中</el-radio-button>
              <el-radio-button label="32">大</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="字体颜色:" prop="textColor">
            <el-color-picker
              v-model="settingValue.textColor"
              show-alpha
              :predefine="predefineColors">
            </el-color-picker>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "TextSetting",
    props: {
      settingValue: {
        type: Object,
        default: () => {
          return{
            text:'',
            textSize:'',
            textColor:''
          }
        }
      }
    },
    data() {
      return {
        activeName: 'content',
        predefineColors: [
          '#000000',
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          'rgba(255, 69, 0, 0.68)',
          'rgb(255, 120, 0)',
          'hsv(51, 100, 98)',
          'hsva(120, 40, 94, 0.5)',
          'hsl(181, 100%, 37%)',
          'hsla(209, 100%, 56%, 0.73)',
          '#c7158577'
        ]
      }
    },
  }
</script>

<style scoped>

</style>
